<template>
  <div class="studentList">
    <!-- 课程列表 -->
    <!-- 查询，重置 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="课程">
        <el-input
          v-model="formInline.name"
          placeholder="请输入课程查询"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item>
        <!-- name从本地中读取 -->
        <router-link :to="{ name: '选课信息', params: { name: stu.stuName } }">
          <el-button type="primary" @click="see">查看</el-button>
        </router-link>
      </el-form-item>
    </el-form>
    <!--分页功能         
        slice(参数1,参数2)
        参数1：从何处开始选取（截取数组单元起始位置的索引下标）
        参数2：从何处结束选取（截取数组单元结束位置的索引下标）
        注意：不包括结束索引下标的数据
  
        后端返回数组例如[1,2,3,4,5.....100]
        前端获取通过   第1页 0-5    slice（0,5）从索引0开始，索引5结束（不包含5） （索引0,1,2,3,4）即(数据1,2,3,4,5)
                      第2页 5-10   slice（(2-1)*5 , 2*5）从索引5开始,索引10结束(不包含10)  (索引5,6,7,8,9）即(数据6,7,8,9,10)
                      第3页 10-15  slice（(3-1)*5 , 3*5）从索引10开始,索引15结束(不包含15)  (索引10,11,12,13,14）即(数据11,12,13,14,15)
        规律slice（  (当前页数-1)*每页条数   ，  当前页数*每页条数  ）
      -->
    <!-- <el-table  border :data="list.compData.slice((currentPage4-1)*pageSize4,currentPage4*pageSize4)"  stripe style="width: 100%"> -->
    <!-- 用计算属性的方法 -->
    <!-- <el-table  border :data="com"  stripe fit style="width: 100%" size="small" >
          <el-table-column prop="cou_Id" label="id" align="center" v-if="false"></el-table-column>
          <el-table-column prop="couNumber" label="课程号" align="center"></el-table-column>
          <el-table-column prop="couName" label="课程名" align="center"></el-table-column>
          <el-table-column prop="couType" label="课程类型" align="center"></el-table-column>
          <el-table-column prop="credit" label="学分"  align="center"></el-table-column>
          <el-table-column label="操作"  align="center"  width="200" >
            <template  #default="scope">
                <el-button type="success"  @click="Select(scope.row)" :disabled="state">选课</el-button>
            </template>
          </el-table-column>
        </el-table> -->
    <el-table
      :data="com"
      border
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        prop="id"
        label="id"
        align="center"
        v-if="false"
      ></el-table-column>
      <el-table-column
        prop="course_Name"
        label="课程名"
        align="center"
        min-width="8%"
      />
      <el-table-column
        prop="course_img"
        label="课程图片"
        align="center"
        min-width="12%"
      >
        <template #default="scope">
          <img :src="scope.row.course_img" class="courseImg-img" alt="" />
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="书本价格"
        align="center"
        min-width="8%"
      />
      <el-table-column
        prop="point"
        label="课程学分"
        align="center"
        min-width="8%"
      />
      <el-table-column
        prop="category"
        label="课程分类"
        align="center"
        min-width="8%"
      />
      <el-table-column
        prop="Introduction"
        label="课程介绍"
        align="center"
        min-width="20%"
      />
      <el-table-column
        prop="count"
        label="剩余人数"
        align="center"
        min-width="8%"
      />
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="你确定要选择吗?"
            @confirm="confirmEvent(scope.row)"
            @cancel="cancelEvent"
          >
            <template #reference>
              <el-button type="success" :disabled="scope.row.state == 1"
                >选课</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5, 10, 15, 20, 50]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 分页组件 -->
    <!-- <Pagination :currentPage="currentPage4"
    :pageSize="pageSize4"
    :total="total"
    :handleSizeChange="handleSizeChange"
    :handleCurrentChange="handleCurrentChange"
    ></Pagination> -->
  </div>
</template>
  <script setup>
import { getToken } from "@/utils/setToken.js";
import { ElMessage } from "element-plus";
import { computed, onMounted, reactive, ref } from "vue";
import { courseList, Coursefind, Courseselect,ChangeCoursecount,ChangeCoursestate } from "@/api/api";
const formInline = reactive({
  name: "大学英语",
});
let stu = reactive({
  stuName: "",
});
let list = reactive({
  compData: [],
});
// let state=ref(false)//选课按钮可用状态
const currentPage4 = ref(1); //当前页数
const pageSize4 = ref(5); //每页显示条目个数，支持 v-model 双向绑定
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(100);
stu.stuName = getToken("name");
//获取表格数据
onMounted(() => {
  courseInfoData();
});
// 获取数据
const courseInfoData = async (params) => {
  await courseList(params).then((res) => {
    console.log(res);
    if (res.data.code === 0) {
      list.compData = res.data.data.list;
      console.log("数据");
      total.value = res.data.data.total;
    }
  });
};
//前端分页功能
const com = computed(() => {
  // 规律slice（  (当前页数-1)*每页条数   ，  当前页数*每页条数  ）
  return list.compData.slice(
    (currentPage4.value - 1) * pageSize4.value,
    currentPage4.value * pageSize4.value
  );
});
//改变每页显示多少条
const handleSizeChange = (val) => {
  pageSize4.value = val;
  currentPage4.value = 1;
  console.log(`每页显示${val}条 `);
};
//改变当前页
const handleCurrentChange = (val) => {
  currentPage4.value = val;
  console.log(`当前页: ${val}`);
};
//搜索
const search = async () => {
  const res = await Coursefind({ name: formInline.name });
  console.log("查询到的数据", res.data.data);
  list.compData = res.data.data;
};
//重置
const reset = () => {
  courseInfoData();
};
//选课按钮
//选课按钮功能
const Select = (row) => {
  console.log("课程id", row.id);
  console.log("课程数量", row.count);
  console.log("按钮状态", row.state);
  if (row.count === 0) {
    ElMessage({
      message: "课程人数已满,请选择其他课程",
      type: "warning",
    });
    row.state = 1;
  } else {
    Courseselect({ id: row.id, name: stu.stuName }).then((res) => {
      console.log(res.data.message);
      if (res?.data.message === "选课成功") {
        ElMessage({
          message: res.data.message,
          type: "success",
        });
        row.count = row.count - 1;
        row.state = 1;
        ChangeCoursecount({ id: row.id, count: row.count }).then((res) => {
          console.log(res.data.message);
        });
        console.log("课程数量减少", row.count);
        console.log("课程状态", row.state);
        if (row.count == 0) {
          ChangeCoursestate({ id: row.id, state: row.state }).then(
            (res) => {
              console.log(res.data.message);
            }
          );
        }
      } else if (res?.data.message === "该课程已选择") {
        ElMessage({
          message: res.data.message,
          type: "warning",
        });
        row.state = 1;
      }
    });
  }
};
//调用选课按钮的确认方法
const confirmEvent = (row) => {
  console.log("确定!");
  Select(row);
};
//调用选课按钮的取消方法
const cancelEvent = () => {
  console.log("取消!");
};
</script>
  
  <style lang="less" scoped>
.studentList {
  .demo-form-inline,
  .el-form-item {
    text-align: left;
  }
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }
  .courseImg-img {
    width: 70px;
    height: 70px;
  }
}
</style>